<template>
  <div class="numbers">
    <span 
      v-for="(number, index) in numStr.split(',')" 
      :key="index"
      class="ball ball-unselected"
      :class="'jssc-ball-'+ number"
      >
      {{number}}
    </span>
  </div>
</template>

<script>
export default {
  props: {
    numStr: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="stylus" scoped>
  .numbers 
    display flex
    .ball 
      display flex 
      align-items center 
      justify-content center
      width 21px 
      height 21px 
      border-radius 50% 
      box-sizing border-box 
      margin-right 5px 
      font-size 12px 
      &:last-child 
        margin-right 0
</style>